<template>
  <!--全局卡片-->
  <el-card class="box-card">
    <div slot="header" class="clearfix">

      <!--上方表单-->
      <el-form :inline="true" :model="searchForm" ref="searchForm" class="demo-form-inline">
        <el-form-item label="项目编码">
          <el-input v-model="searchForm.projectCode" placeholder="请输入项目编码" style="width: 250px"
                    size="medium"></el-input>
        </el-form-item>
        <el-form-item label="项目名称" style="margin-left: 50px">
          <el-input v-model="searchForm.projectName" placeholder="请输入项目名称" style="width: 250px"
                    size="medium"></el-input>
        </el-form-item>

        <el-form-item size="mini" style="margin-left: 280px">
          <el-button @click="search" class="blue" type="primary" icon="el-icon-search">查询</el-button>
          <el-button @click="resetForm" class="whit" icon="el-icon-refresh">重置</el-button>
          <el-button class="whit" icon="el-icon-zoom-in">高级搜索</el-button>
        </el-form-item>

        <el-form-item label="项目状态">
          <el-select v-model="searchForm.projectState" placeholder="请选择项目状态" style="width: 250px" size="medium">
            <el-option label="全部项目状态" :value="0"></el-option>
            <el-option label="未施工" :value="1"></el-option>
            <el-option label="施工中" :value="2"></el-option>
            <el-option label="施工完成" :value="3"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="工程类别" style="margin-left: 50px">
          <el-select v-model="searchForm.projectType" placeholder="请选择工程类别" style="width: 250px" size="medium">
            <el-option
              v-for="project in projectList"
              :key="project.projectId"
              :label="project.projectType"
              :value="project.projectId"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item style="margin-left: 290px">
          <el-input size="medium"
                    style="width: 250px;"
                    v-model="searchForm.projectCompany"
                    placeholder="请输入关键字"
                    suffix-icon="el-icon-search">
          </el-input>
        </el-form-item>
        <hr>
        <el-form-item>
          <el-button icon="el-icon-s-operation" type="text"></el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="text">全部</el-button>
          <el-button type="text">在用</el-button>
          <el-button type="text">停用</el-button>
        </el-form-item>
        <el-form-item size="mini" style="margin-left: 842px">
          <el-button class="blue" type="primary" icon="el-icon-plus">新建</el-button>
          <el-button class="whit" icon="el-icon-bottom">导入</el-button>
          <el-button class="whit" icon="el-icon-top">导出</el-button>
        </el-form-item>
      </el-form>

      <!--下方表格-->
      <el-table
        :data="projectList"
        @selection-change="handleSelectionChange"
        style="width: 100%"
      >
        <!--复选框,默认会有事件handleSelectionChange-->
        <el-table-column
          type="selection"
        >
        </el-table-column>
        <el-table-column
          type="index"
          label="序号"
        >
          <template slot-scope="scope">
            {{ (pageNum - 1) * pageSize + scope.$index + 1 }}
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          prop="projectCode"
          label="项目编码"
        >
        </el-table-column>
        <el-table-column
          align="center"
          prop="projectName"
          label="项目名称"
        >
        </el-table-column>
        <el-table-column
          prop="projectState"
          label="项目状态">
          <template slot-scope="scope">
            <el-tag
              :type="getProjectStateTagType(scope.row.projectState)"
              disable-transitions>
              {{ getProjectStateTagName(scope.row.projectState) }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          prop="projectType"
          label="工程类别"
        >
        </el-table-column>
        <el-table-column
          align="center"
          prop="projectCompany"
          label="分包公司"
        >
        </el-table-column>

        <el-table-column
          align="center"
          prop="projectArea"
          label="所属地区"
        >
        </el-table-column>

        <el-table-column
          data="projects"
          align="center"
          prop="projectUseState"
          label="状态"
        >
          <template slot-scope="scope">
            <el-switch
              v-model="scope.row.projectUseState"
              @change="handleSwitchChange(scope.row)"
              :active-value="1"
              :inactive-value="0"
              active-color="#185dc6"
              inactive-color="#aaaaaa"
              inline-prompt="是否在用"
              active-text="在用"
              inactive-text="停用"
            >
            </el-switch>
          </template>
        </el-table-column>

        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-button
              class="edit"
              size="mini"
              @click="projectUpdate('编辑项目资源',scope.row)"
              type="text"
            >编辑
            </el-button>
            <el-button
              class="delById"
              size="mini"
              @click="handleDelete(scope.row)"
              type="text"
            >删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageNum"
        :page-sizes="[5,6,7,8]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>
  </el-card>
</template>

<script>
import {getList} from "@/api/pr/project";

export default {
  data() {
    return {
      projects: [],
      searchForm: {
        projectCode: "", // 项目编码
        projectName: "", // 项目名称
        projectState: "", // 项目状态
        projectType: "", // 工程类别
      },
      projectList: [],
      projectResource: {
        projectCode: "", // 项目编码
        projectName: "", // 项目名称
        projectState: "", // 项目状态
        projectType: "", // 工程类别
        projectCompany: "", // 分包公司
        projectArea: "", // 所属地区
        projectUseState: "", // 项目启用状态
      },
      pageNum: 1,
      pageSize: 8,
      total: 0,
      title: ''
    }
  },
  methods: {
    getProjectList() {
      console.log("yunnx")
      getList({
        pageNum: this.pageNum,
        pageSize: this.pageSize,
        projectCode:this.searchForm.projectCode, // 项目编码
        projectName:this.searchForm.projectName, // 项目名称
        projectState:this.searchForm.projectState, // 项目状态
        projectType:this.searchForm.projectType, // 工程类别
      }).then(res => {
        if (res.code === 20000) {
          // res.data取出的是pageInfo对象
          this.projectList = res.data.list
          this.total = res.data.total
        }
      }).catch(error => {
        console.error("API 请求错误:", error); // 捕获并打印错误
      });
    },

    // 重置表单
    resetForm(formName) {
      this.searchForm = {
        projectCode: "", // 项目编码
        projectName: "", // 项目名称
        projectState: "", // 项目状态
        projectType: "", // 工程类别
      }
      this.getProjectList()
    },

    // 模糊查询
    search() {
      console.log("搜索表单数据:", this.searchForm); // 添加调试信息
      this.getProjectList()
    },

    // 复选框默认触发
    handleSelectionChange(val) {
      let ids = []
      for (let i = 0; i < val.length; i++) {
        ids.push(val[i].projectId)
      }
      this.ids = ids
    },

    // 编辑
    projectUpdate() {

    },

    // 删除
    handleDelete() {

    },

    //分页
    handleSizeChange(size) {
      this.pageSize = size
      this.getProjectList()
    },
    handleCurrentChange(currentPage) {
      this.pageNum = currentPage
      this.getProjectList()
    },

    // 判断项目类别
    getProjectStateTagType(status) {
      const typeMap = {
        '1': '',
        '2': 'warning',
        '3': 'success'
      };
      return typeMap[status] || ''; // 如果状态不在预期范围内，则返回空字符串
    },
    // 项目类型前端展示
    getProjectStateTagName(status) {
      const typeMap = {
        '1': '未施工',
        '2': '施工中',
        '3': '施工完成'
      };
      return typeMap[status] || ''; // 如果状态不在预期范围内，则返回空字符串
    },

    handleSwitchChange(row) {
      console.log(`项目 ${row.name} 状态变更为: ${row.projectUseState === 1 ? '在用' : '停用'}`);
      // 这里可以添加代码来处理状态变化，比如向后台发送请求更新状态
    }
  },
  created() {
    this.getProjectList()
  }
}
</script>

<style scoped lang="scss">
.blue{
  color: #ffffff;
  background-color: #306ecc;
  border-color: #306ecc;
}
.whit{
  color: #306ecc;
  border-color: #306ecc;
}
.edit{
  color: #185dc6;
}
.delById{
  color: #e10707;
}
</style>
